<template>
	<view class="view_box">
		<topNavBar :navbarData.sync="navbarData"></topNavBar>
		<img class="tips_text" src="https://100000063-1252208446.file.myqcloud.com/images/MF-EB-Revamp-Phase%201-NEW-322/yinjiutishi.png" />
		<view class="cl-sxp" :style="{paddingTop: titleHeight+'px'}">
			<view class="cl-sxp-tips" :style="{top: titleHeight+'px'}">
				<img class="cl-sxp-tips-imgs" src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/chatlabs_tips3.png" />
				<view class="back_to_home" @click.stop="backToHome"></view>
			</view>
			<cl-sxp :props="clSxpProps" />
		</view>
		<register-widget ref="registerWidgetRef" location="AIexperience" @finish="onRegisterWidgetFinish" @registerSuccess='registerSuccess' />
	</view>
</template>

<script>
	import topNavBar from './topNavBar.vue';
	import registerWidget from "@/components/register/register-widget.vue";
	const { CLSxpEvent } = requirePlugin("sxpPlugin");
	
	export default {
		components: {
		  topNavBar: topNavBar,
			registerWidget
		},
		data() {
			return {
				// 组件所需的参数
				navbarData: {
					showCapsule: 0, //是否显示左上角图标   1表示显示    0表示不显示
					title: "", //导航栏 中间的标题
					newLogo: uni.getStorageInfoSync("storeLogo"),
					isTopFixed: false,
				},
				// 定义组件属性响应数据
				clSxpProps: {},
				titleHeight: 0,
			};
		},
		async onLoad(params) {
			/**
			 * 参数
			 * tenantId=83735140-f2cb-4632-a003-0fd68246a1a3
				appId=6760ddc4ff4bc63b89afec54
				path=macallan
				channel=cl_source%3Dtest
				utm_term=Media
				utm_campaign=CLST
				utm_medium=Opening
				_channel_track_key=h2XQiU3S
				utm_source=Weibo
				utm_content=Opening
			 */
			if(params && params.tenantId){
				const {mode, pageId,channel,tenantId,appId,path,utm_term,utm_campaign,utm_medium,_channel_track_key, utm_source, utm_content} = params;
				let pages = getCurrentPages();
				const currPage = pages[pages.length - 1];
				
				this.clSxpProps = {
					channel: decodeURIComponent(channel),
					onNavigateToMP: null,
					tenantId: tenantId,
					appId: appId,
					pagePath: path,
					pageId: pageId || "", // 可选参数，用作页面预览模式
					mode: mode || "", // 可选参数，用作页面预览模式
					height: "100%",
					mpPath: currPage.$page.fullPage
				}
			}
			
			let systemInfo = wx.getWindowInfo();
			let rect = uni.getMenuButtonBoundingClientRect ? uni.getMenuButtonBoundingClientRect() : null; //胶囊按钮位置信息
			let navBarHeight = (function() {
				//导航栏高度
				let gap = rect.top - systemInfo.statusBarHeight; //动态计算每台手机状态栏到胶囊按钮间距
				return 2 * gap + rect.height;
			})();
			this.titleHeight = navBarHeight + systemInfo.statusBarHeight;
		},
		onReady(){
			CLSxpEvent.on("navigateToMiniProgram", this.handleToMP);
		},
		onShow() {},
		onUnload() {
			CLSxpEvent.off("navigateToMiniProgram", this.handleToMP);
		},
		onHide() {},
		methods: {
			onRegisterWidgetFinish(){},
			registerSuccess(){},
			handleToMP(params) {
			  wx.navigateTo({ url: params.path });
			},
			backToHome(){
				uni.reLaunch({
					url: '/pages/home/home'
				});
			}
		}
	}
</script>

<style lang="less">
	.view_box {
		position: relative;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		width: 100%;
		height: 100vh;
	}
	.tips_text{
		width: 100%;
		height: 29rpx;
		position: fixed;
		left: 0;
		bottom: 20rpx;
		z-index: 199999;
	}
	.cl-sxp{
		flex: 1;
		height: 100%;
		box-sizing: border-box;
		position: relative;
	}
	.cl-sxp-tips{
		width: 600rpx;
		position: absolute;
		margin-left: 50%;
		left: -300rpx;
		top: 0;
		z-index: 99999;
	}
	.cl-sxp-tips-imgs{
		width: 600rpx;
		height: 49rpx;
		padding-top: 20rpx;
	}
	.back_to_home{
		position: absolute;
		left: 334rpx;
		top: 20rpx;
		width: 150rpx;
		height: 65rpx;
		z-index: 1999;
	}
</style>